<template>
	<view class="reprot ff-padding-bottom-70 ff-color-222 ff-font-14">
		<view class="assessmentDetails-content ff-border-radius-10 ff-bg-fff ff-margin-12 ff-font-14">
			<view
				class="assessmentDetails-content-info-header ff-padding-left-15 ff-padding-right-15 ff-padding-top-15">
				<view class="ff-font-16 ff-font-weight-600 ff-color-000 ff-line-height-1-3">
					{{ assessmentDetails.assessName }}
				</view>
				<view class="ff-align-items-one ff-flex-wrap">
					<view class="ff-margin-right-10 ff-font-12">
						<view v-if="assessmentDetails.assessStatus == 2" class="tips1">评估状态&nbsp;|&nbsp;已响应</view>
						<view v-if="assessmentDetails.assessStatus == 3" class="tips1">评估状态&nbsp;|&nbsp;待指派</view>
						<view v-if="assessmentDetails.assessStatus == 11" class="tips1">评估状态&nbsp;|&nbsp;待评估</view>
						<view v-if="assessmentDetails.assessStatus == 4" class="tips1">评估状态&nbsp;|&nbsp;评估中</view>
						<view v-if="assessmentDetails.assessStatus == 5" class="tips1">评估状态&nbsp;|&nbsp;待提交</view>
						<view v-if="assessmentDetails.assessStatus == 6" class="tips1">评估状态&nbsp;|&nbsp;待审核</view>
						<view v-if="assessmentDetails.assessStatus == 7" class="tips1">评估状态&nbsp;|&nbsp;待签发</view>
						<view v-if="assessmentDetails.assessStatus == 8" class="tips1">评估状态&nbsp;|&nbsp;已驳回</view>
						<view v-if="assessmentDetails.assessStatus == 9" class="tips1">评估状态&nbsp;|&nbsp;已完成</view>
						<view v-if="assessmentDetails.assessStatus == 10" class="tips5">评估状态&nbsp;|&nbsp;已解约</view>
						<view v-if="assessmentDetails.assessStatus == 12" class="tips5">评估状态&nbsp;|&nbsp;已作废</view>
					</view>
				</view>
				<view class="ff-font-13 ff-margin-top-8 ff-line-height-1-3 ff-flex">
					<view>社会单位：</view>
					<view>{{ assessmentDetails.companyName || '/' }}</view>
				</view>
				<view class="ff-font-13 ff-margin-top-4 ff-line-height-1-3 ff-flex">
					<view>评估地址：</view>
					<view style="width: 75%;">{{ assessmentDetails.assessAddr || '/' }}</view>
				</view>
				<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/report-edit.png"
					mode=""></image>
			</view>
			<view class="assessmentDetails-content-info-box ff-padding-10">
				<view
					class="assessmentDetails-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					评估信息</view>
				<view class="assessmentDetails-content-info-box-content">
					<view class="ff-flex ff-padding-left-5 ff-line-height-1-3 ff-margin-bottom-16">
						<view class="assessmentDetails-content-info-box-content-left">项目负责人</view>
						<view class="assessmentDetails-content-info-box-content-right">
							<view v-for="(item, index) of assessmentDetails.leaders" :key="index">
								{{ item.projectLeaderName }}&nbsp;{{ item.projectLeaderPhone }}
							</view>
						</view>
					</view>
					<view class="ff-flex ff-padding-left-5">
						<view class="assessmentDetails-content-info-box-content-left">项目成员</view>
						<view class="assessmentDetails-content-info-box-content-right">
							<view class="ff-margin-bottom-5" v-for="(item, index) of assessmentDetails.operators"
								:key="index">
								{{ item.projectOperatorName }}&nbsp;{{ item.projectOperatorPhone }}
							</view>
						</view>
					</view>
				</view>
				<view v-if="assessmentDetails.cancelReason" class="ff-margin-top-16">
					<view class="ff-flex ff-padding-left-5 ff-margin-bottom-16">
						<view class="assessmentDetails-content-info-box-content-left">作废人</view>
						<view class="assessmentDetails-content-info-box-content-right">
							{{ assessmentDetails.cancelUsername || '/' }}
						</view>
					</view>
					<view class="ff-flex ff-padding-left-5 ff-margin-bottom-16">
						<view class="assessmentDetails-content-info-box-content-left">作废时间</view>
						<view class="assessmentDetails-content-info-box-content-right">
							{{ assessmentDetails.cancelTime || '/' }}
						</view>
					</view>
					<view class="ff-flex ff-padding-left-5">
						<view class="assessmentDetails-content-info-box-content-left">作废原因</view>
						<view class="assessmentDetails-content-info-box-content-right">
							{{ assessmentDetails.cancelReason || '/' }}
						</view>
					</view>
				</view>
			</view>
			<view class="assessmentDetails-content-info-box ff-padding-10">
				<view
					class="assessmentDetails-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					评估依据</view>
				<view class="ff-flex-wrap">
					<view class="ff-margin-right-10 ff-margin-bottom-10"
						v-for="(item, index) of assessmentDetails.basis" :key="index">
						<u-tag
							:text="`${index + 1}.${item.legalDocumentNumber == null ? '' : item.legalDocumentNumber}${ item.legalBasisName }`" />
					</view>
				</view>
			</view>
		</view>
		<!-- 组件区 -->
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'assessmentDetails',
		data() {
			return {
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				assessmentDetails: [] // 报告书内容数据
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// console.log('前边页面传过来的数据---', e);
			this.getAssessmentDetails(e.id); // 获取评估详情数据
		},
		methods: {
			// 获取评估详情页数据
			async getAssessmentDetails(assessId) {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/bsAssessProjectInfo/detail`,
					data: {
						assessId: assessId
					}
				});
				// console.log('获取评估详情页数据------', data);
				if (data.code == 200) {
					this.assessmentDetails = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.tips5 {
		margin-top: 15rpx !important;
		margin-bottom: 0 !important;
	}

	.assessmentDetails {
		&-content {
			.tips1 {
				border: 2rpx solid #2b68ff;
				color: #2b68ff;
				padding: 10rpx 15rpx;
				border-radius: 8rpx;
				margin-top: 15rpx;
			}

			.tips2 {
				border: 2rpx solid #f0403d;
				color: #f0403d;
				padding: 10rpx 15rpx;
				border-radius: 8rpx;
				margin-top: 15rpx;
			}

			position: relative;

			&-info {
				&-header {
					image {
						width: 230rpx;
						height: 230rpx;
						position: absolute;
						right: 0%;
						top: 0%;
					}
				}

				&-box {
					&-title {
						background: linear-gradient(to right, #eeeeee, #ffffff);
						padding: 24rpx 20rpx 20rpx;
						margin: 24rpx 0 28rpx;
					}

					&-content {
						&-left {
							width: 29%;
							color: #a6a6a6;
						}

						&-right {
							width: 64%;
						}

						&-textareaLeft {
							color: #a6a6a6;
						}

						&-fireList {
							border-bottom: 2rpx solid #eee;
						}

						&-img {
							image {
								width: 100%;
								height: 140rpx;
							}
						}

						&-result {
							&-fraction {
								color: #adadad;
								margin: 34rpx 0 0;
							}

							&-text {
								margin-top: 38rpx;

								/deep/.u-input__textarea {
									font-size: 30rpx !important;
									color: #222222 !important;
									line-height: 1.3 !important;
									// padding: 0!important;
								}
							}
						}
					}
				}
			}
		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-size-default {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}

			&-reject {
				width: 50%;

				/deep/.u-btn--warning {
					border: 2rpx solid #3178ff;
					background-color: #ffffff;
					color: #3178ff;
				}

				/deep/.u-warning-hover {
					background-color: #ffffff !important;
				}
			}

			&-pass {
				width: 50%;
			}
		}
	}

	.corrigendum {
		/deep/.u-btn--primary {
			padding: 0 35rpx !important;
		}
	}

	.codeImg {
		width: 300rpx;
		height: 230rpx;
	}

	/deep/.u-size-default {
		height: auto !important;
	}
</style>